<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水果购买</title>
    <style>
        table{
            width: 600px;
            display: block;
            margin: 0 auto;
            border: 1px solid #ccc;
            border-collapse: collapse;
        }
        td,th{
            border: 1px solid #ccc;
            width: 100px;
            text-align: center;
            cursor: default;
            user-select:none; 
        }

        tr{
            height: 30px;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th><input type="checkbox" v-model="checkAll" @change="handleChange"></th>
            <th>名称</th>
            <th>价格</th>
            <th>减少</th>
            <th>数量</th>
            <th>增加</th>
            <th>总计</th>
        </tr>
        <tr v-for:="item in goods">
            <td><input type="checkbox" v-model="checked" name="goods" :value="item.name"></td>
            <td>{{item.name}}</td>
            <td>{{item.price}}</td>
            <td @:click="handleDec(item)">-</td>
            <td>{{item.count}}</td>
            <td @:click="handleInc(item)">+</td>
            <td>{{item.price*100*item.count/100}}</td>
        </tr>
        <tr>
            <td colspan="7">{{checked.join(",")}}</td>
        </tr>
        <tr>
            <td colspan="6">总金额:</td>
            <td>{{total}}</td>
        </tr>
    </table>
    <script src="./vue.global.js"></script>
    <script>
         const { createApp } = Vue;
        createApp({
            data() {
                return {
                    goods:[
                        {name:"苹果",price:2.38,count:3},
                        {name:"香蕉",price:3.37,count:1},
                        {name:"橘子",price:6.34,count:2},
                        {name:"西瓜",price:0.99,count:6},
                    ],
                    checkAll:false,
                    checked:[],
                }
            },
            methods: {
                handleDec(obj){
                    if(obj.count===1){
                        alert("数量不能少于1")
                        return;
                    }
                    obj.count--;
                },
                handleInc(obj){
                    obj.count++;
                },
                handleChange(){
                    if(this.checkAll){
                        this.checked=this.goods.map(v=>v.name);
                    }else{
                        this.checked=[];
                    }
                }
            },
            computed: {
                total(){
                    let n=0;
                    this.goods.forEach(v => {
                        if(this.checked.includes(v.name)){
                            n+=v.price*v.count;
                        }
                    });
                    return n.toFixed(2);
                }
            }
        }).mount('table');
    </script>
</body>
</html>